<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图切片版本切换</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 553px;
            border:1px solid #3473b7;
        }
    </style>
    <script src = '../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        //切换控件颜色
        //SuperMap.Control.SKIN = "BLUE";
        var map, layer,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-ChinaProvinces/rest/maps/ChinaProvinces";
        // ps: 带有切片版本的服务地址，需要用户自己配置，具体详见iServer的帮助文档

        function init(){
            //初始化地图
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.OverviewMap(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.ScaleLine()
            ]});
            //初始化图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{useCanvas: true,maxResolution:"auto"});
            //监听图层信息加载完成事件
            layer.events.on({"layerInitialized":addLayer});
        }
        //异步加载图层
        function addLayer(){
            // layer.getTilesets();
            map.addLayer(layer);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(124,30), 0);
            addChangetilesversionControl();
        }

        //添加切片版本切换控件
        function addChangetilesversionControl(){
            var changeTilesVersion = new SuperMap.Control.ChangeTilesVersion({defaultPosition: new SuperMap.Pixel(200,35)});
            //与图层关联
            changeTilesVersion.setLayer(layer);

            //是否显示滑动条，默认为true
            //changeTilesVersion.showSlider = false;
            //版本信息显示容器的宽度，默认是50
            //changeTilesVersion.infWidth = 60;
            //在显示滑动条的情况下 设置滑动条的长度 默认是160
            //changeTilesVersion.sliderWidth = 120;

            //将控件添加到地图上
            map.addControl(changeTilesVersion);
            //将控件在地图上移除
            //map.removeControl(changeTilesVersion);
        }
    </script>
</head>
<body onLoad = "init()">
<div id = "map"></div>
</body>
</html>